{% load i18n lfs_tags %}

<div class="navigation-pages-inline">
    {% if page.has_previous %}
        <a class="ajax-link"
           href="{% url lfs_manage_featured_inline %}?page=1"><img src="{{ STATIC_URL }}icons/resultset_first.png" alt='{% trans "First" %}' /></a>
        <a class="ajax-link"
           href="{% url lfs_manage_featured_inline %}?page={{ page.previous_page_number }}"><img src="{{ STATIC_URL }}icons/resultset_previous.png" alt='{% trans "Previous" %}' /></a>
    {% else %}
        <img src="{{ STATIC_URL }}icons/resultset_first.png" alt='{% trans "First" %}' />
        <img src="{{ STATIC_URL }}icons/resultset_previous.png" alt='{% trans "Previous" %}' />
    {% endif %}

    <span style="position: relative; top:-4px ">
        {{ page.number }} {% trans "of" %} {{ paginator.num_pages }}
    </span>

    {% if page.has_next %}
        <a class="ajax-link"
           href="{% url lfs_manage_featured_inline %}?page={{ page.next_page_number }}"><img src="{{ STATIC_URL }}icons/resultset_next.png" alt='{% trans "Next" %}' /></a>
        <a class="ajax-link"
           href="{% url lfs_manage_featured_inline %}?page={{ paginator.num_pages }}"><img src="{{ STATIC_URL }}icons/resultset_last.png" alt='{% trans "Last" %}' /></a>
    {% else %}
        <span><img src="{{ STATIC_URL }}icons/resultset_next.png" alt='{% trans "Next" %}' /></span>
        <span><img src="{{ STATIC_URL }}icons/resultset_last.png" alt='{% trans "Last" %}' /></span>
    {% endif %}
</div>
<table class="lfs-manage-table" style="margin-top:20px">
    <tr>
        <td width="50%">
            <h2>{% trans 'Products' %}</h2>
            <form id="add-featured-form"
                  action="{% url lfs_manage_add_featured %}"
                  method="post">
                <div id="featured-left" style="padding-bottom:10px">
                    <table class="lfs-manage-table">
                        <tr>
                            <th class="checkbox">
                                <input type="checkbox"
                                       class="select-all"
                                       value="products" />
                            </th>
                            <th>
                                {% trans 'Name' %}
                            </th>
                            <th class="small">
                                {% trans 'SKU' %}
                            </th>
                            <th class="tiny right-padding">
                                {% trans 'Active' %}
                            </th>
                        </tr>
                        {% for product in page.object_list %}
                            <tr class="{% cycle 'even' 'odd' %}">
                                <td>
                                    <input type="checkbox"
                                           name="product-{{ product.id }}"
                                           class="select-products" />
                                </td>
                                <td>
                                    <a href="{% url lfs_manage_product product.id %}">
                                        {{ product.get_name }}
                                    </a>
                                </td>
                                <td>
                                    {{ product.get_sku }}
                                </td>
                                <td class="right-padding">
                                    {% if product.is_active %}
                                        <img src="{{ STATIC_URL }}icons/tick.png" />
                                    {% else %}
                                        <img src="{{ STATIC_URL }}icons/cross.png" />
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                <input type="hidden"
                       name="keep-filters"
                       value="1" />

                <input type="submit"
                       class="ajax-save-button button"
                       value="{% trans 'Add to Featured Products' %}" />
            </form>
        </td>
        <td width="50%">
            <h2>{% trans 'Featured products' %}</h2>
            <form id="featured-update-form"
                  action="{% url lfs_manage_update_featured %}"
                  method="post">
                <div id="featured-right" style="padding-bottom:10px">
                    <table class="lfs-manage-table">
                        <tr>
                            <th class="checkbox">
                                <input type="checkbox"
                                       class="select-all"
                                       value="featured-products" />
                            </th>
                            <th>
                                {% trans 'Name' %}
                            </th>
                            <th class="small">
                                {% trans 'SKU' %}
                            </th>
                            <th class="small">
                                {% trans 'Position' %}
                            </th>
                            <th class="tiny right-padding">
                                {% trans 'Active' %}
                            </th>
                        </tr>

                        {% for ts in featured %}
                            <tr>
                                <td>
                                    <input type="checkbox"
                                           name="product-{{ ts.id }}"
                                           class="select-featured-products" />
                                </td>
                                <td>
                                    <a href="{% url lfs_manage_product ts.product.id %}">
                                        {% if ts.product.get_name %}
                                            {{ ts.product.get_name }}
                                        {% else %}
                                            ---
                                        {% endif %}
                                    </a>
                                </td>
                                <td>
                                    {{ ts.product.get_sku }}
                                </td>
                                <td>
                                    <input class="number"
                                           type="text"
                                           size="3"
                                           name="position-{{ ts.id }}"
                                           value="{{ ts.position }}" />
                                </td>
                                <td class="right-padding">
                                    {% if ts.product.is_active %}
                                        <img src="{{ STATIC_URL }}icons/tick.png" />
                                    {% else %}
                                        <img src="{{ STATIC_URL }}icons/cross.png" />
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                <input type="hidden"
                       name="keep-filters"
                       value="1" />

                <input type="submit"
                       class="ajax-save-button button"
                       name="save"
                       value="{% trans 'Save Featured' %}" />

                <input type="submit"
                       class="ajax-save-button button"
                       name="remove"
                       value="{% trans 'Remove from Featured' %}" />
            </form>
        </td>
    </tr>
</table>
<script>
    $("#manage-tabs").show();
    align_buttons("#featured");
</script>
